{% extends "layout.html" %}

{% block content %}
    <div class="container">
    <h2>账号注册</h2>

    {# 表单 #}
    <form class="form-horizontal" method="post" action="{{ url_for('reg.index') }}">
        {{ form.csrf_token }}
        {# 标签导航 #}

{#        <ul class="nav nav-tabs">  {# 填充整个导航条：nav-justified #}
{#            <li role="presentation" class="active"><a href="{{ url_for('reg.index') }}">账号注册</a></li>#}
{#            <li role="presentation"><a href="{{ url_for('reg.phone') }}">手机注册</a></li>#}
{#            <li role="presentation"><a href="{{ url_for('reg.email') }}">邮箱注册</a></li>#}
{#        </ul>#}
        <div class="form-group">{{ form.user_pid }}</div>
        <div class="form-group">
            {{ form.user_pid.label(class="col-sm-2 control-label") }}
            <div class="col-sm-10">
                <div class="form-control">{{ form.user_pid.data | nickname }}</div>
            </div>
        </div>

        <div class="form-group{% if form.account.errors %} has-error{% endif %}">
            {{ form.account.label(class="col-sm-2 control-label") }}
            <div class="col-sm-10">
                {{ form.account(class="form-control", placeholder="登录账号[2-20位]", minlength=2, maxlength=20) }}
                {% for error in form.account.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="form-group{% if form.password.errors %} has-error{% endif %}">
            {{ form.password.label(class="col-sm-2 control-label") }}
            <div class="col-sm-10">
                {{ form.password(class="form-control", placeholder="登录密码[6-20位]", minlength=6, maxlength=20) }}
                {% for error in form.password.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="form-group{% if form.confirm.errors %} has-error{% endif %}">
            {{ form.confirm.label(class="col-sm-2 control-label") }}
            <div class="col-sm-10">
                {{ form.confirm(class="form-control", placeholder="登录密码[6-20位]", minlength=6, maxlength=20) }}
                {% for error in form.confirm.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="form-group{% if form.captcha.errors %} has-error{% endif %}">
            {{ form.captcha.label(class="col-sm-2 col-xs-12 control-label") }}
            <div class="col-sm-8 col-xs-8">
                {{ form.captcha(class="form-control", placeholder="图形验证码", maxlength=4) }}
                {% for error in form.captcha.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
            <div class="col-sm-2 col-xs-2">
                <img src="{{ url_for('captcha.get_code', code_type='reg') }}" rel="tooltip" title="看不清？换一张" id="captcha_img" onclick="refresh_code();">
            </div>
        </div>
        <div class="form-group{% if form.accept_agreement.errors %} has-error{% endif %}">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        {{ form.accept_agreement }} 我已阅读并同意 <a href="#" data-toggle="modal" data-target="#agreement">《注册协议》</a>
                    </label>
                    {% for error in form.accept_agreement.errors %}
                    <span class="help-block">{{ error }}</span>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default btn-load" data-loading-text="注册中">注册</button>
            </div>
        </div>
    </form>
    </div>

    <!-- 注册协议 -->
    {% include('reg/_agreement.html') %}

{% endblock %}

{% block extra_js %}
<script>
    // 初始化赋值
    $('.selectpicker').selectpicker('val', 'a');
    // 处理选项修改
    $('#reg_type').on('changed.bs.select', function (event, clickedIndex, newValue, oldValue) {
        // console.log($('.selectpicker').val());
        // console.log(event);
        // console.log(clickedIndex);
        // console.log(newValue);
        // console.log(oldValue);
    });

    // 刷新验证码
    function refresh_code() {
        var now = new Date();
        $('#captcha_img')[0].setAttribute("src", "{{ url_for('captcha.get_code', code_type='reg') }}" + "?t=" + now.getTime());
    }
</script>
{% endblock %}
